<template>
	<view class="" style="padding-bottom: 50px;">
		<view class="u-skeleton">
			<view class="u-skeleton-fillet" style="width: 100%;height: 490rpx;">
				<image class="" style="width: 100%;height: 100%;" :src="order.homepageImg" mode="aspectFill"></image>
			</view>
			<view class="bg padding-lr padding-tb-sm">
				<view class="flex align-center justify-between">
					<view class="text-bold margin-top-sm margin-bottom-sm u-line-1"
						style="width: 500rpx;font-size: 32upx;">
						{{order.myLevel}}
					</view>
					<view v-if="order.count">已服务{{order.count}}人</view>
				</view>

				<!-- <view class="flex align-center">
					<view class="radius margin-right-xs "
						style="color: #FF2D01;background-color: #FBEBF0;font-size: 25rpx;padding: 8upx 10upx;">
						<text>{{order.region?order.region:'不限地区'}}</text>
					</view>
					<view class=" ">
						<text class="padding-xs margin-right-xs  radius"
							style="color: #FF2D01;background-color: #FBEBF0;font-size: 25upx;"
							v-for="(item,index) in order.gameName" :key="index">{{item}}</text>

					</view>
				</view> -->
				<view class="flex align-start justify-between text-sm">
					<view class="text-gray">
						<text>
							{{order.serviceMethod === '1' ? '上门服务 ':'到店服务 '}}
						</text>
						<text v-if="order.restrictedArea">
							服务范围: {{queryCitiesByDistrictCodes(order.restrictedArea)}}
						</text>
					</view>
					<view class="margin-left-sm" style="width: 150rpx;">
						已服务{{order.count}}人
					</view>
				</view>
				<view class=" flex justify-between align-center margin-top-sm">
					<!-- <view class="text-xxl" style="color: #FF2D01;" v-if=" order.memberMoney">
						{{isVip? order.memberMoney :order.money}}<text style="font-size: 28rpx;">元/{{order.unit}}</text>
						<text v-if="isVip" style="font-size: 26rpx;margin-left: 10rpx;">会员价</text>
					</view> -->
					<view class="price-container">
						<text class="current-price">
							¥
							<text style="font-size: 18px;">{{ order.money }}</text>
						</text>
						<text class="discount-tag" v-if="order.money && order.oldMoney">
							{{discountPercentage(order.money,order.oldMoney)}}
						</text>
						<text class="original-price">¥{{ order.oldMoney }}</text>
					</view>
					<view v-if=" order.minNum">
						{{order.minNum}}{{order.unit}}起购
					</view>

				</view>

				<view class="vipbox" v-if="!isVip&&isVipkg!='否'&&order.memberMoney">
					<view>会员价
						<text class="text-bold">￥</text>
						<text style="font-size: 34rpx;font-weight: bold;">{{order.memberMoney}}</text>
					</view>
					<view class="flex align-center text-sm" @click="goVip()">
						立即开通
						<image src="../../../static/images/vipright.png"
							style="width: 15rpx;height: 25rpx;margin-left:10rpx;"></image>
					</view>
				</view>

				<view class="flex align-center align-center margin-tb-sm padding-lr padding-tb-xs "
					v-if="order.detailadd" @tap="bindGps(order.latitude,order.longitude,order.detailadd)"
					style="background: #FFF8F4;border: 1rpx solid #E0D0A7;border-radius: 14upx;">
					<view class="flex align-center">
						<image src="../../../static/images/index/xqadd.png" style="width: 27upx;height: 37upx;"></image>
						<view class="margin-left-xs text-cut addbox">
							{{order.detailadd}}
						</view>
					</view>
					<view>
						<image src="../../../static/images/my/right.png" style="width: 11rpx;height: 18rpx;"></image>
					</view>
				</view>

			</view>

			<view class="padding-sm bgs u-skeleton-fillet">
				<view class="bg padding flex align-center justify-between" @click="goNav()">
					<view class="">时间</view>
					<view class="flex align-center justify-between">
						<view>立即预约 <text style="color: #FF2D01;margin-left:30upx;"></text></view>
						<image src="../../../static/images/my/right.png" style="width: 11rpx;height: 18rpx;"></image>
					</view>
				</view>

				<view class="margin-top-sm padding bg text-white radius u-skeleton-fillet">
					<view class="flex align-center justify-between">
						<view class="text-lg">用户评价</view>
						<view @click="gocomment()">
							<text class="text-sm margin-right-xs">查看更多</text>
							<image src="../../../static/images/my/right_icon.png" style="width: 12upx;height: 20upx;">
							</image>
						</view>
					</view>
					<view v-if="commentList.length<=0" class="margin-top-sm "> 暂无评价</view>
					<view class="margin-tb-sm" v-else>
						<view class="margin-bottom-sm" v-if="commentList.length!=0"  v-for="(item,index) in commentList" :key="index">
							<view class="flex justify-between">
								<u-avatar :src="item.avatar" size="48"></u-avatar>
								<view class="flex-sub margin-left-sm" style="line-height: 46upx;">
									{{item.userName}}
								</view>
								<view class="flex">
									<u-icon v-for="ite in item.satisfactionFlag" :key='ite' color="#2087fe"
										name="star-fill"></u-icon>
								</view>
							</view>
							<view class="margin-top-sm">{{item.evaluateMessage}}</view>
							<view class="margin-top-xs flex flex-wrap">
								<view class="margin-right-xs margin-bottom-xs"
									v-for="(img,ind) in item.evaluateImg" :key="ind"
									@click="saveImg(item.evaluateImg,ind)">
									<image :src="img" mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
								</view>
							</view>
						</view>
					
					</view>
				</view>
				<view class="margin-top-sm bg radius u-skeleton-fillet padding-bottom" v-if="order.detailsImg">
					<view class="text-center padding">服务详情</view>
					<!-- <view v-for="(item,index) in order.detailsImg" :key="index"
						@click="saveImg(order.detailsImg,index)">
						<image :src="item" style="width: 100%;" mode="widthFix"></image>
					</view> -->

					<u-parse class='margin-top' :html="order.detailsImg"></u-parse>
				</view>

			</view>
			<!-- v-if="myId != order.userId" 暂时去掉 -->
			<view class="u-skeleton-fillet text-white flex justify-between cu-bar foot bg padding-lr"
				> 

				<view @click="shop(order.userId)" class="padding-left" style="width: 120rpx;">
					<image src="../../../static/images/index/dianpu.png" style="width: 47rpx;height: 45rpx;"></image>
					<view style="font-size: 22upx;margin-top: 0px;">店铺</view>
				</view>
				<view @click="goTousu(order.userId)" class="padding-left" style="width: 120rpx;">
					<image src="../../../static/images/index/tousu.png" style="width: 50rpx;height: 50rpx;"></image>
					<view style="font-size: 22upx;margin-top: 0px;">投诉</view>
				</view>
				<view @click="goMsg" class="padding-left" style="width: 140rpx;">
					<image src="../../../static/images/index/im.png" style="width: 49rpx;height: 43rpx;"></image>
					<view style="font-size: 22upx;">咨询</view>
				</view>
				<view class="flex-sub">
					<u-button :custom-style="customStyle" @click="goNav()" shape="circle" :hair-line="false">立即预约
					</u-button>
				</view>
			</view>
		</view>
		<!-- <u-picker v-model="show" mode="time" :params="params" @confirm="statusChange"></u-picker> -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import address from '@/utils/area.js'
	export default {
		onShareAppMessage(res) {
			return {
				path: '/pages/index/game/order?invitation=' + this.invitationCode+'&id='+this.id, //这是为了传参   onload(data){let id=data.id;} 
				title: this.order.myLevel,
				imageUrl: this.order.homepageImg
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/index/game/order?invitation=' + this.invitationCode+'&id='+this.id, //这是为了传参   onload(data){let id=data.id;} 
				title: this.order.myLevel,
				imageUrl: this.order.homepageImg
			}
		},
		data() {
			return {
				game: [],
				loading: true, // 是否显示骨架屏组件
				customStyle: {
					width: '400upx',
					color: '#FFFFFF',
					background: "#2087fe",
					border: 0
				},
				id: '',
				orderDet: {},
				page: 1,
				limit: 10,
				order: {},
				commentList: [],
				isFollow: false,
				myId: '',
				isVip: false,
				AUDIO: uni.createInnerAudioContext(),
				isPlay: false,
				show: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true
				},
				startTime: '',
				mobile: '',
				name: '',
				cityaddress: '',
				detailaddress: '',
				latitude: '',
				longitude: '',
				province: '',
				city: '',
				district: '',
				XCXIsSelect: '是',
				isVipkg: '否',
				token: '',
				invitationCode:''
			}
		},
		computed:{
			queryCitiesByDistrictCodes() {
				let regions = address.data;
				return function(fwJson) {
					let districtCodes = JSON.parse(fwJson);
					return regions.reduce((result, province) => {
						const matchedCities = province.children.reduce((cities, city) => {
							const matchedDistricts = city.children.filter(district => districtCodes
								.includes(district.code));
							if (matchedDistricts.length === city.children.length) {
								cities.push(`${city.name}(全部范围)`);
							} else if (matchedDistricts.length > 0) {
								cities.push(
									`${city.name}(${matchedDistricts.map(d => d.name).join('，')})`);
							}
							return cities;
						}, []);
			
						if (matchedCities.length > 0) {
							result.push(`${province.name}[${matchedCities.join('，')}]`);
						}
						return result;
					}, []).join(';');
				}
			},
			discountPercentage(){
				return function(money,oldMoney) {
					let discount = money / oldMoney;
					let discountPercentage = (Math.ceil(discount * 100) / 10).toFixed(1);
					return discountPercentage+"折";
				}
			}
		},
		onLoad(option) {
			// this.$queue.showLoading("加载中...");
			let that = this
			// #ifdef MP-WEIXIN
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				that.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif
			
			// 获取邀请码保存到本地
			if (option.invitation) {
				that.$queue.setData('inviterCode', option.invitation);
			}
			that.id = option.id
			that.getDet()
			that.invitationCode = uni.getStorageSync('invitationCode')
			// this.getOrderComment()
			that.myId = uni.getStorageSync('userId')
			that.token = uni.getStorageSync('token')
			that.XCXIsSelect = that.$queue.getData('XCXIsSelect');


		},
		onShow() {
			this.isVip = uni.getStorageSync('isVIP')
			this.isVipkg = this.$queue.getData('isVipkg');
			this.getDet()
			this.getOrderComment()
			if(this.myId){
				this.getIsVip()
			}
		},
		onReady() {
			this.AUDIO.onEnded(function(res) {
				this.isPlay = false;
			});
		},
		methods: {
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then(res => {
					if (res.code == 0) {
						this.isVip = res.data
						uni.setStorageSync('isVIP', res.data)
					}
				});
			},
			navigate(href, e) {
				// #ifdef H5
				window.location.href = href;
				//#endif

				//#ifdef APP-PLUS
				setTimeout(function() {
					plus.runtime.openURL(href);
				}, 500);
				// #endif
			},
			//查看全部评价
			gocomment() {

				if (this.token) {
					uni.navigateTo({
						url: "/my/setting/pinglun?id=" + this.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			// 服务投诉
			goTousu(userId) {
				if (this.token) {
					uni.navigateTo({
						url: '/my/order/complain?byUserId=' + userId + '&platform=4&platformId=' + this.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}


			},
			//详情图片放大
			saveImg(imgs, index) {
				// console.log(imgs)
				let that = this;
				let imgArr = imgs
				// imgArr.push(imgs);
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			// 地址
			bindAdd() {
				uni.navigateTo({
					url: '../../../my/address/address'
				})
			},
			goVip() {
				if (this.token) {
					uni.navigateTo({
						url: '/my/vip/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			
			},
			// 一键导航
			bindGps(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 详情
			getDet() {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				});
				let userId = uni.getStorageSync('userId')
				this.$Request.get("/app/orderTaking/queryTakingDetails", {
					id: this.id,
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
					userId: userId
				}).then(res => {
					uni.hideLoading();
					this.loading = false
					if (res.code == 0) {
						this.order = res.data
						this.order.gameName = this.order.gameName.split(",");
						// this.order.detailsImg = this.order.detailsImg.split(",");
					}

				});

			},
			// 评论
			getOrderComment() {
				this.$Request.get("/app/evaluate/getUserEvaluate", {
					orderTakingId: this.id,
					page: this.page,
					limit:3,
					userId: this.order.userId,
				}).then(res => {
					if (res.code == 0) {
						for (var i = 0; i < res.data.records.length; i++) {
							if (res.data.records[i].evaluateImg) {
								res.data.records[i].evaluateImg = res.data.records[i].evaluateImg.split(',')
							}
						}
						if (this.page == 1) {
							this.commentList = res.data.records
						} else {
							this.commentList = [...this.commentList, ...res.data.records]
						}


					}
				});
			},
			// 跳转店铺
			shop(userId) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/index/game/shop?shopUserId=' + userId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			
			},
			playVoice() {
				console.log(this.isPlay)
				this.AUDIO.src = this.order.voiceIntroduce;
				if (this.isPlay) {
					this.AUDIO.stop();
				} else {
					this.AUDIO.play();
				}
				this.isPlay = !this.isPlay;
			},
			goNav() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/index/game/orderDet?id=" + this.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			goMsg() {
				if (this.token) {
					let data = {
						userId: this.myId,
						focusedUserId: this.order.userId,
						userType: 1
					}
					this.$Request.postJson('/app/chat/insertChatConversation', data).then(res => {
						if (res.code == 0) {
							let id = this.order.userId == res.data.userId ? res.data.focusedUserId : this.order.userId
							uni.navigateTo({
								url: '/pages/msg/chat?chatConversationId=' + res.data.chatConversationId +
									'&byUserId=' + id + '&byNickName=' + this.order.userName
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
				
			},
			// 关注
			follow() {
				let that = this
				that.$Request.get("/app/userFollow/insert", {
					followUserId: that.order.userId
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(function() {
						that.selectFollow()
					}, 500)
				});
			}
		}

	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.bgs {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.line_s {
		display: inline-flex;
		width: 14rpx;
		height: 14rpx;
		background: #1AD566;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.line_x {
		display: inline-flex;
		width: 14rpx;
		height: 14rpx;
		background: #000000;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.u-size-default {
		background: #557EFD !important;
	}

	.addbox {
		width: 550upx;
		font-size: 26upx;
	}

	.vipbox {
		margin-top: 10rpx;
		background: linear-gradient(to right, #3e3e47 5%, #26252b 90%);
		color: #ffe5c3;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 30rpx;
	}
	
	.price-container {
		display: flex;
		align-items: center;
	}
	
	.original-price {
		font-size: 14px;
		color: #999;
		/* 添加删除线 */
		text-decoration: line-through;
	}
	
	.discount-tag {
		font-size: 10px;
		color: #ff5000;
		border: 1px solid;
		padding: 1px 3px;
		border-radius: 3px;
		margin-right: 5px;
	
	}
	
	.current-price {
		font-size: 14px;
		color: #ff5000;
		font-weight: bold;
		margin-right: 3px;
	}
</style>